<template>
  <div class="website">
    <div class="container">
      <div class="col-md-3 col-xs-5 sidebar">
        <div class="author-wrapper">
          <div class="img-responsive center-block author-avatar">
          </div>
          <div class="author-intro">
            <ul>
              <li class="text-center">
                <span class="glyphicon glyphicon-user"></span>
                <span class="name">林荣途</span>
              </li>
              <li class="text-center">
                <span class=""></span>
                <span class="major">网络工程</span>
              </li>
            </ul>
          </div>
          <div class="author-extra">
            <ul>
              <li class="text-center"><a href="https://www.gdupt.edu.cn/">广东石油化工学院</a></li>
              <li class="text-center"><a>计算机学院</a></li>
              <li class="text-center"></li>
              <li class="text-center"><a>邮箱</a></li>
              <li class="text-center"><a href="https://github.com/xiaoying1314/">Github</a></li>
              <li class="text-center"><a href="https://gitee.com/linrongtu">Gitee</a></li>
              <li class="text-center"><a>微信公众号</a></li>
              <li class="text-center"><a>微信号</a></li>
              <li class="text-center"><a href="https://blog.csdn.net/qq_42885734/article/details/116375298">个人博客</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-9 col-xs-7 page">
        <article>
          <div class="page-inner-wrapper">
            <header>
              <h1>个人简介</h1>
              <p>林荣途，来自广东石油化工学院网络工程的一名学生。学校能教的很少，重要的是自己要主动去学习，有方向去学习，不能漫无目的。
                学校能给你的，能教给你很少很少，选了计算机类想要有个好点的工作你就要不断地自学，花费你很多课外时间，不止是我们学校，所
                有计算机学子，都应该有这个想法。计算机类对于自学的要求要高很多很多。</p>
            </header>
            <section class="page-content">
              <h2>发展方向</h2>
              <p>众所周知，一个伟大的web前端工程师应该具备这些技术：</p>
              <ol>
                <li>html、css、js等基础知识</li>
                <li>jQuery为代表的一系列框架</li>
                <li>MVVM框架、Vue、React等</li>
                <li>小程序技术、微信小程序等</li>
                <li>跨平台技术uni-app等</li>
                <li>服务端技术、node.js等</li>
                <li>优化技术</li>
                <li>监控技术</li>
                <li>工程化</li>
              </ol>
              <h2>项目经历</h2>
              <div class="img-wrapper">
                <p>
                  &nbsp;&nbsp;&nbsp;&nbsp;1、在校期间，通过自学，完成了一个小型的类似于饿了么的web网站，并在此期间掌握了vue-cli、eslint、vue-router、axios、vue等技术栈。
                  还了解到了相关框架，比如：bootstrap、jquery等等，相信在不久的将来，会对这些提高前端开发效率的框架越来越熟悉。
                </p>
                <ol>
                  <li><img @click="pictureShow" src="../assets/images/mysell_1.png" alt="vue饿了么"></li>
                  <li><img @click="pictureShow" src="../assets/images/mysell_2.png" alt="vue饿了么"></li>
                  <li><img @click="pictureShow" src="../assets/images/mysell_3.png" alt="vue饿了么"></li>
                </ol>
              </div>
              <p>
                &nbsp;&nbsp;&nbsp;&nbsp;2、借助java完成了对一个飞机大战项目的功能添加。并因此让自己更加熟悉了java语言对象、继承、内部类等。
              </p>
              <div class="img-wrapper">
                <p>
                  &nbsp;&nbsp;&nbsp;&nbsp;3、暑假期间，成功地在阿里云购买服务器，并通过一系列复杂的域名解析、备案、服务器配置成功地搭建起了一个属于自己的个人静态网站，
                  加强了对全栈和网站运作的理解。
                </p>
                <ol>
                  <li><img @click="pictureShow" src="../assets/images/myweb_1.png" alt="vue饿了么"></li>
                  <li><img @click="pictureShow" src="../assets/images/myweb_2.png" alt="vue饿了么"></li>
                  <li><img @click="pictureShow" src="../assets/images/myweb_3.png" alt="vue饿了么"></li>
                </ol>
              </div>
              <h2>加入我们</h2>
              <p>站长微信：<strong>*************</strong></p>
              <h2>联系方式</h2>
              <p>电话：<strong>***********</strong>，邮箱：<strong>**********@qq.com</strong></p>
              <h2>内容转载</h2>
              <p>本网站有关内容多为原创，请勿用于任何商业目的，如需转载请联系站长</p>
            </section>
            <footer></footer>
          </div>
        </article>
      </div>
    </div>
    <div class="line"></div>
    <div class="footer">
      <ul class="copyright">
        <li><span>©2021 Rong-Tu Lin All Rights Reserved</span></li>
        <li><a href="#">林荣途的个人网站</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="https://beian.miit.gov.cn/">粤ICP备2021103035号</a></li>
        <li>
          <span>
            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44082502000033">
              <img src="../assets/images/beian.png" style="float:left;"/>
              <p>粤公网安备44082502000033号</p>
            </a>
          </span>
        </li>
      </ul>
    </div>
    <div class="picture" v-show="isLookPicture">
      <div class="picture-up">
        <img id="myimg"  alt="放大的图片">
      </div>
      <div @click="pictureClose" class="picture-down glyphicon glyphicon-remove">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'website',
  data () {
    return {
      isLookPicture: false,
      mywebPath1: '../assets/images/myweb_1.png',
      mywebPath2: '../assets/images/myweb_2.png',
      mywebPath3: '../assets/images/myweb_3.png',
      mysellPath1: '../assets/images/mysell_1.png',
      mysellPath2: '../assets/images/mysell_2.png',
      mysellPath3: '../assets/images/mysell_3.png'
    }
  },
  methods: {
    pictureShow () {
      let data = document.getElementsByTagName('picture-up')[0]
      window.alert(data)
      this.isLookPicture = true
    },
    pictureClose () {
      this.isLookPicture = false
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .website
    margin-top: 20px
    .container
      .sidebar
        .author-wrapper
          .author-avatar
            width: (390/3)px
            height: (567/3)px
            background: url('../assets/images/myavatar.jpg') no-repeat
            background-size: (390/3)px (567/3)px
            border-radius: 100%
            margin-top: 20px
            margin-bottom: 12px
          .author-intro
            font-size: 12px
            margin-bottom: 12px
            ul
              margin: 0
              padding: 0
              list-style-type: none
              li
                font-size: 12px
              li:hover
                font-size: 14px
              .name
                margin-bottom: 8px
              .major
                font-size: 12px
                margin-bottom: 8px
          .author-extra
            ul
              list-style: none
              margin: 0
              padding: 0
              li
                font: normal 12px/30px PingFang SC,STHeitiSC-Light,Helvetica-Light,arial,sans-serif,Droid Sans Fallback
              li:hover
                font-size: 14px
      .page
        .page-inner-wrapper
          h1
            font-size: 16px
            font-weight: 700
          p
            font-size: 12px
          .page-content
            .img-wrapper
              ol
                list-style: none
                display: inline-flex
                width: 100%
                padding: 12px
                li
                  flex: 1
                  padding: 0
                  margin: 0
                  img
                    max-width: 60%
                    background-size: 20px
                  img:hover
                    max-width: 80%
            h2
              font-weight: 700
              font-size: 16px
            p
              border: 1 red solid
              font-size: 12px
    .line
      background: white
      width: 100%
      height: 20px
    .footer
      border-top: 1px  solid rgba(7, 17, 27, .1)
      width: 100%
      background: #f2f3f3
      padding-left: 45px
      position: sticky
      .copyright
        bottom: 0
        margin-top: 24px
        margin-bottom: 24px
        color: #939393
        font-size: 12px
        li
          margin-right: 30px
          display: inline-flex
          flex-direction: row
          flex: 1
          list-style: none
          white-space: nowrap
    .picture
      position: absolute
      top: 0
      opacity: 0.5
      width: 100%
      height: 100%
      background: black
      text-align: center
      display: flex
      flex-direction: column
      .picture-up
        flex: 3
        font-size: 40px
        margin-top: 200px
      .picture-down
        flex: 1
        color: white
        font-size: 50px
</style>
